<script setup>
const props = defineProps({
    // 提示语
    placeholder: {
        type: String,
        default: '请选择日期',
    },
    // 是否显示快捷选项
    showPickerOptions: {
        type: Boolean,
        default: false,
    },
    valueFormat: {
        type: String,
        default: 'YYYY-MM-DD',
        validator: (value) => ['YYYY-MM-DD', 'YYYY-MM', 'YYYY'].includes(value)
    },
    setDefaultValue: {
        type: Boolean,
        default: false,
    },
    full: {
        type: Boolean,
        default: false,
    },
    modelValue: {
        type: String,
        default: ''
    }
})

import { ref, computed, watch } from 'vue'
const timeDate = ref('')
// 单时间选择器
// 时间选择器 --天
const pickerOptionsDay = {
    shortcuts: [
        {
            text: '今天',
            value: new Date()
        },
        {
            text: '昨天',
            value: (() => {
                let date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                return date
            })
        },
        {
            text: '一周前',
            value: (() => {
                let date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                return date
            })
        },
        {
            text: '一个月前',
            value: (() => {
                let date = new Date()
                date.setMonth(date.getMonth() - 1)
                return date
            })
        },
        {
            text: '三个月前',
            value: (() => {
                let date = new Date()
                date.setMonth(date.getMonth() - 3)
                return date
            })
        }
    ]
}
// 时间选择器 --月
const pickerOptionsMonth = {
    shortcuts: [
        {
            text: '本月',
            value: new Date()
        },
        {
            text: '上月',
            value: (() => {
                let date = new Date()
                date.setMonth(date.getMonth() - 1)
                return date
            })
        },
        {
            text: '三个月前',
            value: (() => {
                let date = new Date()
                date.setMonth(date.getMonth() - 3)
                return date
            })
        }
    ]
}
// 时间选择器 --年
const pickerOptionsYear = {
    shortcuts: [
        {
            text: '今年',
            value: new Date()
        },
        {
            text: '去年',
            value: (() => {
                let date = new Date()
                date.setFullYear(date.getFullYear() - 1)
                return date
            })
        },
        {
            text: '前年',
            value: (() => {
                let date = new Date()
                date.setFullYear(date.getFullYear() - 2)
                return date
            })
        }
    ]
}

const showPickerOptionsType = computed(() => {
    if (!props.showPickerOptions) return []
    if (props.valueFormat === 'YYYY-MM-DD') {
        // 年月日
        return pickerOptionsDay.shortcuts
    } else if (props.valueFormat === 'YYYY-MM') {
        // 年月
        return pickerOptionsMonth.shortcuts
    } else if (props.valueFormat === 'YYYY') {
        // 年
        return pickerOptionsYear.shortcuts
    } else {
        return []
    }
})
const datePickerType = computed(() => {
    let type = props.valueFormat === 'YYYY-MM-DD' ? 'date' : props.valueFormat === 'YYYY-MM' ? 'month' : 'year'
    return type
})
const emit = defineEmits(['update:modelValue'])
const selectDate = (date) => {
    emit('update:modelValue', date)
}

watch(() => props.modelValue, value => {
    timeDate.value = value
}, { immediate: true })

if (props.setDefaultValue) {
    let date = new Date()
    let year = date.getFullYear()
    let month = String(date.getMonth() + 1).padStart(2, '0')
    let day = String(date.getDate()).padStart(2, '0')
    let defaultDate = ''
    if (props.valueFormat === 'YYYY') {
        defaultDate = `${year}`
    } else if (props.valueFormat === 'YYYY-MM') {
        defaultDate = `${year}-${month}`
    } else if (props.valueFormat === 'YYYY-MM-DD') {
        defaultDate = `${year}-${month}-${day}`
    }
    emit('update:modelValue', defaultDate)
}
</script>
<template>
    <el-date-picker v-model="timeDate" :placeholder="placeholder" :format="valueFormat" :value-format="valueFormat"
        align="center" :type="datePickerType" :shortcuts="showPickerOptionsType" :editable="false" @change="selectDate"
        :class="full ? 'full-box-class' : ''" />
</template>


<style scoped lang="scss">
.full-box-class {
    width: 100% !important;
}
</style>